<template>
	<musichead class="musichead" name="摸摸鱼" :isShowback="true" />
	<view class="search-everyone">
		<view class="search-search">
			<input class="uni-input" v-model="words" @confirm="search" placeholder-style="color: #e9e9e9;" placeholder="请输入要搜索的歌曲" />
			<text class="iconfont icon-sousu" @click="search(null)"></text>
		</view>
		<view class="search-body">
			<view class="search-nav">
				<view style="margin-left: 5px;">历史记录</view>
				<view style="margin-right: 10px;" @click="deleteAll()">清空</view>
			</view>

			<view class="search-box">
				<view class="search-tab"  v-for="item,index in historical" @click="search(item)">
					<view class="" >
						{{item}}
					</view>
					<text class="iconfont icon-shanchu8" @click="deleteid(index)"></text>
				</view>
			</view>
		</view>

	</view>
	<musicbackend class="musicbackend" />
</template>

<script>
	import '@/common/iconfont.css'
	import musichead from '../../components/musichead/musichead.vue'
	import musicbackend from '../../components/musicbackend/musicbackend.vue'
	import {
		searchMusic
	} from '../../common/api.js'
	export default {
		data() {
			return {
				historical:["薛之谦","早岁已知世事艰"],
				words:null
			}
		},
		onLoad() {

		},
		mounted() {},
		methods: {
			deleteid(index){
				 this.historical.splice(index, 1);
			},
			deleteAll(){
				this.historical=[];
			},
			async search(word) {
				try {
					let searchWord = word || this.words;
					if (!searchWord) return;
					
					// Add to historical if not exists and it's a direct search
					if (!word && !this.historical.includes(this.words)) {
						this.historical.push(this.words);
					}
					
					const songlist = await searchMusic(searchWord);
					
					if (!songlist || !Array.isArray(songlist)) {
						throw new Error('Invalid song list data received');
					}
					
					console.log('Search API response:', songlist);
					console.log('Current songList state:', this.songList);
					
					// Navigate to search-result page with data
					uni.navigateTo({
						url: `/pages/search-result/search-result?songList=${encodeURIComponent(JSON.stringify(songlist))}`,
						fail: (err) => {
							console.error('Navigation failed:', err);
							uni.showToast({
								title: '页面跳转失败',
								icon: 'none'
							});
						}
					});
				} catch (error) {
					console.error('Search failed:', error);
					uni.showToast({
						title: '搜索失败，请重试',
						icon: 'none'
					});
				}
			}
		},
		//注册组件
		components: {
			musichead,
			musicbackend
		}
	}
</script>

<style lang="scss">
	.musichead {
		color: #fff;
		position: absolute;
		width: 100vw;
	}

	.search-everyone {
		width: 100vw;
		height: calc(100vh - 50px);
		background-color: #444444;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.search-search {
		position: absolute;
		top: 80px;
		width: 85vw;
		height: 30px;
		border-radius: 20px;
		background-color: rgba(228, 228, 228, 0.5);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		display: flex;

		input {
			width: 250px;
			height: 100%;
			border-radius: 20px 0 0 20px;
			// background-color: rgba(206, 206, 206, 0.5);
			-webkit-backdrop-filter: blur(8px);
			// backdrop-filter: blur(8px);
			padding-left: 10px;
			font-size: 14px;
			font-family: "宋体", SimSun, sans-serif;
			color: #fff;
			
		}

		text {
			margin: auto;
			font-size: 26px;
			color: #fff;
		}

	}

	.search-body {
		position: absolute;
		top: 130px;
		width: 100vw;
		height: calc(80vh - 62px);
		background-color: #404040;
		overflow-y: auto;

		// display: flex;
		// justify-content: center;
		.search-nav {
			width: 100%;
			height: 25px;
			display: flex;
			justify-content: space-between;
			color: #fff;
		}

		.search-box {
			width: 100vw;
			height: 152px;
			margin: auto;
			// margin-bottom: 20px;
			display: block;

			.search-tab {
				height: 22px;
				border-radius: 10px;
				margin: 5px 0px 0px 10px;
				display: inline-flex;
				align-items: center;
				font-size: 16px;
				justify-content: center;
				background-color: rgba(255, 255, 255, 0.5);
				-webkit-backdrop-filter: blur(8px);
				backdrop-filter: blur(8px);
				view{
					margin: 10px;
					margin-right: 5px;
					font-size: 14px;
					color: #fff;
				}
				text{
					margin:2px 8px 0px 0px;
					font-size: 12px;
					
					color: #fff;
				}
			}

		}

	}

	.search-body::-webkit-scrollbar {
		display: none;
	}

	.musicbackend {
		position: absolute;
		z-search: 10;
	}
</style>